<template>
    <div class="mainSty">
        <div class="left">
            <div class="title">{{ name }}</div>
            <div class="imgBoxSty">
                <img :src="imgUrl" class="imgSty">
            </div>
            <el-scrollbar>
                <div class="scrollbar-flex-content">
                    <div class="flex_str">
                        <img v-for="(item, index) in info.imagePathList" :key="index" :src="item" class="imgsSty"
                            @click="selctImg(item)">
                    </div>
                </div>
            </el-scrollbar>
            <div class="miaoshuSty">
                <div>详情:</div>
                <div class="djiSty">{{ info.caseDesc }}
                </div>
            </div>
        </div>
        <div class="right">
            <div class="zhanwei"></div>
            <div v-for="(item, index) in kefu" :key="index" style="text-align: center;">
                <img :src="item.imagePath" class="kefuImgSty">
                <div style="margin:10px 0">{{ item.name }}</div>
            </div>

            <!-- <img src="@/assets/img/ma.png" class="kefuImgSty">
                <div>客服2</div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getHelpDetailApi, getKeFuImgApi } from '@/api/index/index'
const router = useRouter()
console.log(router.currentRoute.value.query.id)
const name = ref<string>()
const imgUrl = ref<string>()
const kefu = ref<any>([])
let info = ref<any>({})
//@ts-ignore
name.value = router.currentRoute.value.query.name
const selctImg = (url: string) => {
    imgUrl.value = url
}
const getDetail = () => {
    // @ts-ignore
    getHelpDetailApi(router.currentRoute.value.query.id).then((res: any) => {
        info.value = res.data
        imgUrl.value = res.data.imagePathList[0]
    })
}
getDetail()
const getKeFu = () => {
    getKeFuImgApi().then((res: any) => {
        console.log(res)
        kefu.value = res.data
    })
}
getKeFu()
</script>
<style scoped>
.title {
    font-size: 22px;
    font-weight: 700;
}

.scrollbar-flex-content {
    display: flex;
    width: 700px;
}

.imgsSty {
    width: 150px;
    height: 80px;
    margin: 20px;
    margin-top: 40px;
}

.kefuImgSty {
    width: 180px;
}

.zhanwei {
    height: 120px;
}

.miaoshuSty {
    width: 580px;
    margin-top: 40px;
}

.djiSty {
    border-radius: 20px;
    font-size: 16px;
    padding: 20px;
    margin-top: 20px;
    min-height: 150px;
}

.mainSty {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 60%;
    margin-left: 20%;
    background-color: #fff;
    min-height: 100vh;
    padding: 24px;
}

.left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 65%;
}

.right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 30%;
}
.imgBoxSty{
    width: 65%;
    height: 600px;
    margin-top: 20px;
}
.imgSty {
    max-width: 100%;
    max-height: 100%;
    width:auto;
    height:auto;
}

.imgList {
    width: 100%;
}

.listImgSty {
    width: 100px;
}</style>